<template>
  <div>
    <h1>1、动态组件的使用</h1>
    <div>
      <button @click="comName='userName'">账号密码的填写</button>
      <button @click="comName='userInfo'">个人信息的填写</button>
    </div>
    <div>
      <p>下面显示注册组件：</p>
      <!-- <userName></userName> -->
      <!-- 
        问题：组件被缓存起来之后，如何知道此刻组件是处于什么状态(隐藏或显示状态)？
        答：vue扩展2个生命周期钩子函数给我们，那么我们可以通过这两个钩子函数来知道。
        分别是：
            activated：被缓存的组件显示的时候触发的函数(激活时触发)
            deactivated：被缓存的组件隐藏的时候触发的函数（失去激活状态触发）
        注意：这两个钩子函数，只有在被keep-alive缓存起来的组件中才会触发。
       -->
       <keep-alive>
          <component :is="comName"></component>
       </keep-alive>
       <!-- 
         总结：keep-alive作用就是用于缓存组件
        -->
    </div>
  </div>
</template>

<script>
import userName from "./components/userName.vue"
import userInfo from "./components/userInfo.vue"
export default {
  components: {
    userName,userInfo
  },
  data(){
    return {
      comName: "userName"
    }
  }
}
</script>

<style>

</style>